<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>

        <ion-title>
            <h1>{{ 'core.settings.opensourcelicenses' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <core-loading [hideUntil]="loaded" placeholderType="column" placeholderHeight="48px">
        <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterChanged($event.target)" (ionCancel)="filterChanged($event.target)"
            [placeholder]="'core.filter' | translate" class="ion-margin-vertical" />
        <ion-list>
            @if (error) {
                <ion-item button class="ion-text-wrap" [href]="licensesUrl" core-link [autoLogin]="false" [detail]="false">
                    <ion-label>
                        {{ 'core.settings.opensourcelicenses' | translate }}
                    </ion-label>
                    <ion-button [href]="licensesUrl" target="_blank" fill="clear" slot="end" core-link [autoLogin]="false">
                        {{ 'core.view' | translate }}</ion-button>
                </ion-item>
            } @else {

                <ion-item *ngFor="let license of licenses" class="ion-text-wrap" lines="inset">
                    <ion-label>
                        <p class="item-heading">
                            @if (license.repository) {
                                <a [href]="license.repository" core-link [autoLogin]="false">{{ license.name }}</a>
                            } @else {
                                {{ license.name }}
                            } - {{ license.version }}
                        </p>
                        @if (license.publisher) {
                            <p>
                                {{ 'core.settings.publisher' | translate }}{{ 'core.labelsep' | translate }} {{ license.publisher }}
                            </p>
                        }
                        <p>{{ 'core.settings.license' | translate }}{{ 'core.labelsep' | translate }} {{ license.licenses }}</p>
                        <p>@if (license.url) {
                                <a [href]="license.url" core-link [autoLogin]="false">{{ license.url }}</a>
                            }
                        </p>
                        <p>@if (license.email) {
                                <a [href]="'mailto:' + license.email" core-link [autoLogin]="false"
                                    [showBrowserWarning]="false">{{ license.email }}</a>
                            }
                        </p>
                    </ion-label>
                    @if (license.licenseUrl) {
                        <ion-button [href]="license.licenseUrl" target="_blank" fill="clear" slot="end" core-link [autoLogin]="false"
                            [ariaLabel]="'core.view' | translate">
                            <ion-icon slot="icon-only" name="fas-up-right-from-square" aria-hidden="true" />
                        </ion-button>
                    }
                </ion-item>

            }
            <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" />
        </ion-list>
    </core-loading>
</ion-content>
